import { defineComponent, computed } from "vue";
import { RouterLink } from "vue-router";
import routes from "@/router";

interface RouteItem {
  path: string;
  name: string;
  children?: RouteItem[];
}

export default defineComponent({
  name: "MenuCom",
  components: {
    RouterLink,
  },
  setup() {
    const router = useRoute();
    // const activeMenu = ref("");
    // 生成导航菜单项
    const generateMenuItems = (routes: RouteItem[]) => {
      return routes.map((route) => {
        if (route.children && route.children.length > 0) {
          return (
            <li key={route.path}>
              <span>{route.name}</span>
              <ul>{generateMenuItems(route.children)}</ul>
            </li>
          );
        } else {
          const isActive = computed(
            () =>
              route.path === router.path ||
              route.path === `/${router.path.split("/")[1]}`
          );
          return (
            <li key={route.path}>
              <RouterLink to={route.path} class={{ active: isActive.value }}>
                {route.name}
              </RouterLink>
            </li>
          );
        }
      });
    };

    return () => (
      <div>
        <ul>{generateMenuItems(routes)}</ul>
      </div>
    );
  },
});
